<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Understanding Responsive Images - Lesson 9</title>

	<!-- Styles -->
	<link rel="stylesheet" href="normalize.css">
	<link href='http://fonts.googleapis.com/css?family=Lato:700, Merriweather:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css'>

	<style>
		/* General Styling */
		body {
			font: 1em/1.5 'Merriweather', Georgia, serif;
			padding: 3em 0;
		}

		h1 {
			font-family: 'Lato', Arial, sans-serif;
		}

		header,
		footer {
			text-align: center;
		}

		figure {
			margin: 3em auto;
			max-width: 45em;
			text-align: center;
		}

			figcaption {
				margin-top: 1.5em;
				font-style: italic;
				font-weight: 300;
				color: #CC9B70;
				text-align: left;
			}

				figcaption::before {
					content: '- ';
				}

		figure.fw {
			max-width: 100%;
		}

			figure.fw figcaption {
				text-align: center;
			}

				figure.fw figcaption::after {
					content: '-';
				}

		blockquote {
			font-style: italic;
			font-weight: 300;
			color: #777;
			font-size: 1.2em;
			max-width: 30em;
			margin: 3em auto;
		}

			blockquote::before {
				content: '"';
			}

			blockquote cite {
				margin-top: 1.5em;
				display: block;
			}

		p {
			color: #444;
			max-width: 45em;
			margin-left: auto;
			margin-right: auto;
		}

		img {
			width: 100%;
			height: auto;
		}

		hr {
			max-width: 45em;
			margin: 3em auto;
		}
	</style>
</head>
<body>

	<!-- HEADER -->
	<header>
		<h1>A simple web page about food</h1>

		<blockquote>
			What I've enjoyed most, though, is meeting people who have a real interest in food and sharing ideas with them. Good food is a global thing and I find that there is always something new and amazing to learn - I love it!

			<cite>Jamie Oliver</cite>
		</blockquote>

		<figure>
			<picture>
				<source
					media="(max-width: 480px)"
					srcset="img/food-1-crop.jpg 480w"
				/>
				<source
					media="(min-width: 480px)"
					srcset="
						img/food-1-large.jpg 1024w,
						img/food-1-medium.jpg 768w,
						img/food-1-small.jpg 480w,
						img/food-1-retina.jpg 2x" 
				/>
				<img src="img/food-1.jpg" alt="Food">
			</picture>
			<figcaption>Awesome food</figcaption>
		</figure>
	</header>

	<!-- MAIN -->
	<main>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore veniam, accusantium ducimus iure exercitationem accusamus alias unde esse reiciendis. Eum!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, asperiores voluptates non maxime sequi consectetur quasi mollitia corrupti excepturi veritatis qui voluptate corporis, quos perspiciatis cum ducimus nostrum ex esse numquam necessitatibus, illum alias consequuntur eum odio adipisci? Doloremque voluptates repudiandae quis ad excepturi facere, temporibus beatae ex atque sint ipsum omnis illo officiis in cum, odio, eum maxime quidem consectetur. Voluptates facilis delectus architecto est dolore, perspiciatis vitae quidem impedit nostrum esse fugit, velit hic eius laborum itaque reprehenderit repellat soluta repellendus aliquam. Veritatis dolorem officia provident dolores, ad quas rerum autem est, totam id fugiat magni mollitia. Illo.</p>

		<figure class="fw">
			<picture>
				<source
					media="(max-width: 480px)"
					srcset="img/food-2-crop.jpg 480w"
				/>
				<source
					media="(min-width: 480px)"
					srcset="
						img/food-2-large.jpg 1024w,
						img/food-2-medium.jpg 768w,
						img/food-2-small.jpg 480w" 
				/>
				<img src="img/food-2.jpg" alt="Food">
			</picture>
			<figcaption>Awesome food</figcaption>
		</figure>

		<hr>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque et, ullam quidem labore sed voluptates, voluptatibus est maiores ab itaque?</p>

		<figure class="fw">
			<picture>
				<source
					media="(max-width: 480px)"
					srcset="img/food-3-crop.jpg 480w"
				/>
				<source
					media="(min-width: 480px)"
					srcset="
						img/food-3-large.jpg 1024w,
						img/food-3-medium.jpg 768w,
						img/food-3-small.jpg 480w" 
				/>
				<img src="img/food-3.jpg" alt="Food">
			</picture>
			<figcaption>Close up shot of food</figcaption>
		</figure>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quisquam voluptatum in ipsa provident blanditiis nesciunt facere. Ea, officiis provident placeat fugit cupiditate minima enim veniam libero hic tempore deserunt iusto qui harum vero consectetur suscipit, architecto cum voluptate assumenda. Eveniet facere officiis ullam, est quasi debitis voluptates corporis culpa!</p>

		<figure>
			<picture>
				<source
					media="(max-width: 480px)"
					srcset="img/food-4-crop.jpg 480w"
				/>
				<source
					media="(min-width: 480px)"
					srcset="
						img/food-4-large.jpg 1024w,
						img/food-4-medium.jpg 768w,
						img/food-4-small.jpg 480w" 
				/>
				<img src="img/food-4.jpg" alt="Food">
			</picture>
			<figcaption>Delicious bread</figcaption>
		</figure>

		<figure>
			<picture>
				<source
					media="(max-width: 480px)"
					srcset="img/food-5-crop.jpg 480w"
				/>
				<source
					media="(min-width: 480px)"
					srcset="
						img/food-5-large.jpg 1024w,
						img/food-5-medium.jpg 768w,
						img/food-5-small.jpg 480w" 
				/>
				<img src="img/food-5.jpg" alt="Food">
			</picture>
			<figcaption>Dinner with friends</figcaption>
		</figure>		
	</main>

	<!-- FOOTER -->
	<footer>
		<hr>
	
		<p>Thanks for dropping by!</p>
	</footer>

</body>
</html>